import React, {forwardRef, useEffect, useState} from "react";
import {Form, Input, Select} from "antd";

const {Option} = Select
const UserForm = forwardRef((props, ref) => {
    const [isDisabled, setIsDisabled] = useState(false)

    useEffect(()=>{
        setIsDisabled(props.isUpdateDisabled)
    },[props.isUpdateDisabled])
    return (
        <Form
            ref={ref}
            layout="vertical"
        >
            <Form.Item
                name="username"
                label="用户名"
                rules={[{required: true, message: '该字段不能为空'}]}
            >
                <Input/>
            </Form.Item>
            <Form.Item
                name="password"
                label="密码"
                rules={[{required: true, message: '该字段不能为空'}]}
            >
                <Input/>
            </Form.Item>
            <Form.Item
                name="region"
                label="区域"
                rules={isDisabled?[]:[{required: true, message: '该字段不能为空'}]}
            >
                <Select disabled={isDisabled}>
                    {
                        props.regionList.map(item => {
                            return (
                                <Option value={item.value} key={item.id}>{item.title}</Option>
                            )
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item
                name="roleId"
                label="角色"
                rules={[{required: true, message: '该字段不能为空'}]}
            >
                <Select onChange={(value) => {
                    console.log(value)
                    if (value === '1') {
                        ref.current.setFieldsValue({
                            region:""
                        })
                        setIsDisabled(true)
                    } else {
                        setIsDisabled(false)
                    }
                }}>
                    {
                        props.roleList.map(item => {
                            return (
                                <Option value={item.value} key={item.id}>{item.roleName}</Option>
                            )
                        })
                    }
                </Select>
            </Form.Item>
        </Form>
    )
})
export default UserForm
